<!--
 * @Author: 陈靓 https://mail.yxt.com
 * @Date: 2024-09-17 21:56:06
 * @LastEditors: 陈靓 https://mail.yxt.com
 * @LastEditTime: 2024-09-17 23:23:33
 * @FilePath: /ailis-card-master-applet/components/ChooseModel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 模态下拉框 -->
    <view v-if="showDropdown" class="dropdown-modal" @click.self="cancleModel">
        <view class="dropdown-content" @click.stop>
            <view v-for="item in items" :key="item.id" @click="selectCategory(item.id)">
                <view :style="{color: item.id == current ? '#906DDE' : ''}">
                {{ item.value }}
				</view>
            </view>
        </view>
    </view>
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps({
		current: String,
		items:Array,
	})
	const emit = defineEmits(['chooseAction']);
	const toggleDropdown = () => {
		console.log("触发模态事件")
		showDropdown.value = !showDropdown.value;
	};
	const cancleModel = () => {
		console.log("触发取消事件")
		if (showDropdown.value){
			showDropdown.value = false;
		}
	};
	// Expose the toggleDropdown method to the parent component
	defineExpose({
		toggleDropdown
	});
	const showDropdown = ref(false)
	function selectCategory(e) {
		console.log(e)
        showDropdown.value = false;
		console.log("执行成功")
		emit('chooseAction', e);
		console.log("触发成功")
	}
</script>

<style lang="scss" scoped>
	.dropdown-modal {
		position: absolute;
		top: 0rpx; 
		left: 0rpx; 
		background-color: rgba(0, 0, 0, 0.5); /* 背景半透明 */
		width: 100%;
		height: 100%;
		z-index: 100;
	}

	.dropdown-content {
		background-color: white;
		padding: 10rpx 20rpx;
		min-width:110rpx;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 532rpx; 
		left: 10rpx; 
		z-index: 200;
	}

	.dropdown-content view {
		padding: 10rpx;
		font-size: 14pt;
	}

	.dropdown-content view:last-child {
		border-bottom: none;
	}
</style>
